<template>
    <el-drawer v-model="drawer" title="医生信息" size="740px" v-loading="loading">
        <div class="doctor-detail-container">
            <el-form :model="doctorData" label-width="80px">
                <div class="doctor-row">
                    <el-form-item label="医生编号">
                        <span>{{ doctorData._id || '暂无' }}</span>
                    </el-form-item>
                    <el-form-item label="医生姓名">
                        <span>{{ doctorData.name || '暂无' }}</span>
                    </el-form-item>
                </div>

                <div class="doctor-row">
                    <el-form-item label="医生头像">
                        <el-image :src="doctorData.avatar" class="doctor-avatar" fit="cover" v-if="doctorData.avatar">
                        </el-image>
                        <div v-else class="avatar-placeholder">
                            暂无头像
                        </div>
                    </el-form-item>
                    <el-form-item label="性别">
                        <span style="margin-top: -28px;">{{ doctorData.gender === 1 ? '男' : doctorData.gender === 0 ?
                            '女' : '未知' }}</span>
                    </el-form-item>
                </div>

                <el-form-item label="角色">
                    <span>{{ doctorData.roleId?.name || '暂无' }}</span>
                </el-form-item>

                <el-form-item label="医生简介">
                    <div class="intro-text">{{ doctorData.intro || '暂无简介' }}</div>
                </el-form-item>

                <el-form-item label="医生擅长">
                    <div class="intro-text">{{ doctorData.skill || '暂无擅长信息' }}</div>
                </el-form-item>

                <el-form-item label="加入团队">
                    <div class="team-info">
                        <div v-if="doctorData.teamIds && doctorData.teamIds.length > 0">
                            <div v-for="(teamId, index) in doctorData.teamIds" :key="teamId">
                                团队 {{ index + 1 }}
                            </div>
                        </div>
                        <div v-else>暂无团队</div>
                    </div>
                </el-form-item>

                <el-form-item label="签约人数">
                    <span>{{ doctorData.signNumber || 0 }}</span>
                </el-form-item>

                <!-- <el-form-item label="创建时间">
                    <span>{{ formatDate(doctorData.createTime) }}</span>
                </el-form-item> -->

                <!-- <el-form-item label="创建人">
                    <span>{{ doctorData.creator || '暂无' }}</span>
                </el-form-item> -->

                <!-- <el-form-item label="账号状态">
                    <span :class="doctorData.state === 1 ? 'status-active' : 'status-inactive'">
                        {{ doctorData.state === 1 ? '启用中' : '已禁用' }}
                    </span>
                </el-form-item> -->

                <div class="action-buttons">
                    <el-button type="primary"
                        @click="$router.push(`/data/doctor/update/${doctorData._id}`)">编辑医生信息</el-button>
                </div>
            </el-form>
        </div>
    </el-drawer>
</template>

<script setup>
import { getDoctorDetailApi } from '@/api/team';
import { ref } from 'vue';

const drawer = ref(false)
const loading = ref(false)
const doctorData = ref({})

// 打开抽屉方法
async function openDrawer(doctorId) {
    console.log('接收到的医生ID:', doctorId);

    if (!doctorId) {
        ElMessage.warning('医生ID不能为空');
        return;
    }

    drawer.value = true;
    await getDoctorDetail(doctorId);
}

defineExpose({
    openDrawer
})

// 获取医生详情
async function getDoctorDetail(doctorId) {
    loading.value = true;
    try {
        const res = await getDoctorDetailApi({
            _id: doctorId
        });

        console.log('医生详情API响应:', res);

        if (res.code === 200) {
            doctorData.value = res.data;
        } else {
            ElMessage.error('获取医生详情失败');
        }
    } catch (error) {
        console.error('获取医生详情失败:', error);
        ElMessage.error('获取医生详情失败，请重试');
    } finally {
        loading.value = false;
    }
}

// 格式化日期
function formatDate(dateString) {
    if (!dateString) return '暂无';
    const date = new Date(dateString);
    return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
    });
}
</script>
<style scoped>
.doctor-detail-container {
    padding: 20px;
    background: #fff;
}

.doctor-row {
    display: flex;
    margin-bottom: 20px;
}

.doctor-row .el-form-item {
    flex: 1;
    margin-right: 40px;
    margin-bottom: 0;
}

.doctor-row .el-form-item:last-child {
    margin-right: 0;
}

.doctor-avatar {
    width: 60px;
    height: 60px;
    border-radius: 8px;
}

.avatar-placeholder {
    width: 60px;
    height: 60px;
    background: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #909399;
    font-size: 12px;
    border: 1px solid #e8e8e8;
}

.intro-text {
    color: #606266;
    line-height: 1.6;
    text-align: justify;
}

.team-info {
    color: #606266;
}

.status-active {
    color: #67c23a;
}

.status-inactive {
    color: #f56c6c;
}

.action-buttons {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e8e8e8;
}

/* 表单项标签样式 */
:deep(.el-form-item__label) {
    color: #666;
    font-weight: normal;
    font-size: 14px;
}

/* 表单项内容样式 */
:deep(.el-form-item__content) {
    color: #333;
    font-size: 14px;
}

/* 表单项间距 */
:deep(.el-form-item) {
    margin-bottom: 20px;
}
</style>
